<template>
	<view>
		<nav-bar color="#333" bgc="#fff" bbtn>返佣明细</nav-bar>
		<view class="top">
			<text>店铺订单返佣：<text class="num" v-if="allData.status!=3">+{{allData.rake_amount}}</text>
			                   <text class="num" v-if="allData.status==3">{{allData.rake_amount}}</text>
			                   </text><text class="status" v-if="allData.status==1">返佣中</text>
							   <text class="status" v-if="allData.status==2">已返佣</text>
							   <text class="status" v-if="allData.status==3">扣返佣</text>
		</view>
		<shopList  :param="allData" :listStyle='listStyle'></shopList>
		<view class="orderInfo">
			<view>
				<text>下单时间：</text><text>{{allData.add_time}}</text>
			</view>
			<view>
				<text>客户姓名：</text><text>{{allData.name}}</text>
			</view>
			<view>
				<text>关联订单：</text><text>{{allData.order_no}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import shopList from '../../components/shopLst.vue';
	export default {
		components:{
			shopList
		},
		data() {
			return {
				
				listStyle:2,
				allData:{}
			}
		},
		methods: {
			getData:function(id){
				let _this = this
				let param = {
					"token":this.token,
					"id":id,
				}
				this.ajaxJson('rakeBackDetail',param,function(data){
					console.log(data);
					_this.allData = data
				})
			}
		},
		onLoad:function(option){
			this.getData(option.id)
		}
	}
</script>

<style scoped>
   *{
   	margin: 0;
   	padding: 0;
   	list-style: none;
   	box-sizing: border-box;
   	font-size: 0.8rem;
   }
   .top{
	   margin-top: 3rem;
	   padding: 0 5%;	
	   margin-bottom: 1rem;
   }
   .num{
	   color: #FD6431;
	   
   }
   .status{
	   float: right;
   }
   .orderInfo{
	   color: #4E5366;
	   margin: 1rem 4% 0;
	   padding: 0.5rem 5%;
	   border-radius: 8px;
	   box-shadow: 0 0 10px 2px #eee;
   }
   .orderInfo view{
	   margin: 1rem 0;
	   font-size: 0.75rem;
   }
   .orderInfo view text{
	   margin-right: 0.5rem;
   }
</style>
